<template>
    <a-form
        layout="inline"
        :model="searchState"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
    >

    <a-form-item v-for="(item,index) in searchListAll"
        :label="item.label"
        :name="item.name" 
      >
        <template v-if="item.type=='text'">
            <a-input v-model:value="searchState[item.name]" />
        </template>
       
        <template v-if="item.type=='treeselect'">
            <a-tree-select
                v-model:value="searchState[item.name]"
                style="width: 180px"
                :tree-data="item.options"
                allow-clear
                placeholder="请选择"
        />
        </template>

        <template v-if="item.type=='datepicker'">
            <a-date-picker v-model:value="searchState[item.name]" @change="(date:any,datestr:string)=>updateDate(datestr,item.name)" />
         </template>
      
    </a-form-item>

      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-item>
    </a-form>
  </template>
  <script lang="ts" setup>
  import {ref, reactive,onMounted,nextTick } from 'vue';
  import type {IFormProps} from '@/interface/form'
  import axiosEl from '@/utils/axios';
  interface ISearchProps {
    searchList:IFormProps[]
  }
  const $props = defineProps<ISearchProps>()
  const $emits = defineEmits<{(event:'sendData',data:any):void}>();
  const formData = reactive<any>({})

  const searchListAll = ref<IFormProps[]>($props.searchList)
// 搜索的数据
const searchState = reactive<any>({});

// 格式化日期
const updateDate = (date:string,name:string)=>{
    formData[name] = date;
}
const onFinish = (values: any) => {
  let datas = {...values, ...formData};
  // 给父组件传值
  $emits('sendData',datas);
};
onMounted(()=>{
// 循环 searchList, 是否有 optionApi ， 如果有 就调接口
        searchListAll.value.forEach(async (item)=>{
            if(item.optionApi){
                const {url,method,data} = item.optionApi;
               let res = await axiosEl({
                    url:url,
                    method:method || 'get',
                    data:data
                }) 
                item.options = res.rows.children;  // 无法重新渲染
            }
        })
})
  
  </script>
  
  